<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="css/index/index.css" rel="stylesheet" />
    <link rel="stylesheet" href="lib/css/animate.css">
    <link rel="stylesheet" href="css/loginOut.css">
    <link rel="stylesheet" href="lib/css/bootstrap.css">
    <script src="lib/js/jquery-1.12.4.js"></script>
    <script src="js/loginText.js"></script>
</head>

<body>
    <!-- left 侧边栏 start -->
    <header>
        <div class="header_content">
            您好，<span class="actor"></span>！
            <div class="loginOut">
                退出
                <span class="iconfont icon-tuichu"></span>
            </div>
        </div>
    </header>
    <div class="content">
        <div id="left">
            <div class="menu">菜单栏</div>
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                <!-- todo -->


            </div>
        </div>
        <!-- left 侧边栏 end -->

        <div class="right">
            <div class="header">主页</div>
            <div class="wellcome animate__animated animate__lightSpeedInRight">
                Have nice day ~
            </div>
        </div>
    </div>
    <footer>
    </footer>
    <div class="footer_content1">权限管理系统2020</div>

</body>

<!-- 左 -->
<script type="text/template" id="myFormData">

    <%for(var i = 0; i < data.length; i++) {%>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <div class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                    href="#<%=i+1%>" aria-expanded="false" aria-controls="<%=i+1%>">
                    <span><%=data[i].father%></span>
                </div>
            </h4>
        </div>
        <div id="<%=i+1%>" class="panel-collapse collapse" role="tabpanel"
            aria-labelledby="headingTwo">
            <div class="panel-body" style="color: #337AB7">
                <%for(var j = 0; j < data[i].sun.length; j++) {%>
                    <div style="margin-top: 20px"><a href="<%=data[i].sun[j].url%>"><%=data[i].sun[j].name%></a></div>
                <%}%>
            </div>
        </div>
    </div>
<% } %>

</script>







<script>
    window.onload = function () {
        // 这个方法太麻烦了，，，换个简单的
        // var urlData = decodeURIComponent(window.location.href)
        // urlData = urlData.split('?')[1]
        // var arr1 = urlData.split('&')
        // var arr2 = {}
        // for (var i = 0; i < arr1.length; i++) {
        //     var arrs = arr1[i].split("=")
        //     arr2[arrs[0]] = arrs[1]
        // }
        // // arr2记录当前用户的信息
        // console.log(arr2)
        // window.actor = arr2.actor
        // console.log(window.actor)
        // $('.actor').text(arr2.actor)

        // 获取当前用户信息
        var actor = JSON.parse(localStorage.getItem('userMessage')).actor
        console.log(actor)

        // 左边菜单栏渲染
        getLeftCategory(function(res) {
            console.log(res)
            $('.panel-group').html(template('myFormData', {
                    data: res
                }))
        }, actor)

    }


    // 根据获取左边菜单栏函数封装
    function getLeftCategory(callback, actor) {
        $.ajax({
            url: '/pages/category/getAllCategoryAndSunCategoryByActor',
            type: 'post',
            data: JSON.stringify({
                actor
            }),
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (res) {
                callback && callback(res)
            }

        })
    }
</script>

<!-- <script src="js/common.js"></script> -->
<script src="lib/js/bootstrap.js"></script>
<script src="lib/js/bootstrap-paginator.js"></script>
<script src="lib/js/template-native.js"></script>


<script src="lib/js/mock.js"></script>
<script src="mock/getCategoryByActor.js"></script>

</html>